<template>
	<view>
		<tui-sticky :scrollTop="scrollTop" stickyHeight="78px" container>
			<view class="padding bg-white" slot="header" ref="sticky">
				<u-search
					@search="list"
					placeholder="任务名称查询"
					v-model="pageRequest.condition.jobName"
					:show-action="false"
				></u-search>
				<view class="padding-top grid col-2 text-center">
					<view :class="{'text-blue': pageRequest.condition.status=='ERROR'}" @click="filterStatus('ERROR')">执行失败</view>
					<view :class="{'text-blue': pageRequest.condition.status!='ERROR'}" @click="filterStatus('')">全部</view>
				</view>
			</view>
			<template slot="content">
				<view class="margin-top">
					<view class="solid-bottom" v-for="(item, index) in pageData.content" :key="item.id">
						<tui-swipe-action :showMask="false" @click="edit($event, item)">
							<template v-slot:content>
								<u-cell-item
									:title-style="{ width: '100%' }"
									icon="clock"
									:title="item.id"
									:arrow="true"
									arrow-direction="right"
									@click="navTo(`log-info?info=${encodeURIComponent(JSON.stringify(item))}`)"
								>
									<view slot="label">
										<view>任务名称：{{ item.jobName }}</view>
										<view>开始时间：{{ item.startTime }}</view>
										<view>结束时间：{{ item.endTime }}</view>
										<view :class="{'text-green': item.status=='SUCCESS', 'text-red': item.status=='ERROR', 'text-orange': item.status=='RUNNING'}">执行结果：{{ item.status }}</view>
									</view>
								</u-cell-item>
							</template>
						</tui-swipe-action>
					</view>
					<u-loadmore :status="pageData.page < pageData.pages ? 'loading' : 'nomore'" bg-color="" class="padding" />
				</view>
			</template>
		</tui-sticky>
	</view>
</template>

<script>
export default {
	onLoad: function(option) {
		this.pageRequest.condition.jobId = option.jobId || '';
		if (this.pageRequest.condition.jobId) {
			this.list(true);
		}
	},
	onPullDownRefresh:function(){
		this.list(true);
	},
	onReachBottom: function() {
		this.list();
	},
	data() {
		return {
			scrollTop: 0, // 滚动高度
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'createTime:desc',
				condition: {}
			},
			pageData: {
				page: 1,
				pages: 1,
				content: []
			}
		};
	},
	//页面滚动执行方式
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		navTo: function(url) {
			uni.navigateTo({
				url: url
			});
		},
		list: function(first) {
			if (first) {
				this.pageRequest.page = 1;
			} else {
				if (this.pageData.page < this.pageData.pages) {
					this.pageRequest.page = this.pageRequest.page + 1;
				} else {
					return;
				}
			}
			this.$request.post(
				`/admin/sys/sched/record/list`,
				this.pageRequest,
				res => {
					let pageData = res.data || {};
					if (this.pageRequest.page > 1) {
						pageData.content = (this.pageData.content || []).concat(pageData.content);
					}
					this.pageData = pageData;
				},
				false,
				true,
				true
			);
		},
		filterStatus: function(status) {
			this.pageRequest.condition.status = status || '';
			this.list(true);
		}
	}
};
</script>

<style lang="scss" scoped></style>
